<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            background-image: linear-gradient(135deg, #50B1FF 0%, #1F57D6 100%);
        }

        .container {
            width: 30%;
            margin: 0 auto;
            height: 25%;
            background-color: red;
        }

        /* 顶部 */
        .top-box {
            display: flex;
            justify-content: space-between;
        }

        /* 日期 */
        .top-box .title .data {
            color: white;
        }

        /* 农历 */
        .top-box .title .calendar {
            opacity: .72;
        }

        /* 搜索区域 */
        .search-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .search-box .location {
            display: flex;
            align-items: center;
            margin-right: 20px;
            font-size: 10px;
        }

        .search-box .location img {
            width: 5px;
            height: 5px;
            margin-right: 7.1px;
        }

        .search-box .search-city {
            width: 23px;
            height: 9px;
            border: none;
            border-radius: 16px;
            padding-left: 10px;
            background-color: rgba(255, 255, 255, .2);
            color: white;
            font-size: 10px;
        }

        .search {
            position: relative;
        }

        /* 搜索列表 */
        .search-list {
            width: 100%;
            height: 200px;
            overflow-y: scroll;
            background-color: #fff;
            position: absolute;
            display: none;
            cursor: pointer;
        }

        .search-list.show {
            display: block;
        }

        .search-list::-webkit-scrollbar {
            display: none;
        }

        .search-list li {
            color: black;
            font-size: 10px;
        }

        .search-list li:hover {
            background-color: lightgray;
        }

        /* 当前天气 */
        .weather-box {
            display: flex;
            align-items: flex-end;
        }

        .weather-box .tem-box {
            display: flex;
            flex-direction: column;
        }

        .weather-box .tem-box .temp span {
            display: inline-block;
        }

        .climate-box .air {
            display: inline;
            padding: 5px 10px;
            height: 32px;
            border-radius: 16px;
            background: #65D45A;
            text-align: center;
            line-height: 32px;
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #FFFFFF;
            letter-spacing: 0;
            font-weight: 500;
        }

        .climate-box .weather-list {
            display: flex;
            align-items: flex-end;
            margin-top: 21px;
            margin-bottom: 28px;
        }

        .climate-box .weather-list li img {
            width: 20px;
            height: 20px;
        }

        .climate-box .weather-list li {
            margin-right: 20px;
        }

        .climate-box .weather-list li,
        .climate-box .weather-list span {
            display: flex;
            align-items: center;
            font-size: 16px;
        }

        /* 今日详细天气 */
        .today-weather {
            display: flex;
            padding-left: 50px;
        }

        .today-weather .range-box,
        .today-weather .range {
            font-size: 16px;
        }

        .today-weather .sun-list {
            display: flex;
            align-items: center;
            margin-left: 50px;
        }

        .today-weather .sun-list li {
            font-size: 16px;
            margin-right: 42px;
        }

        /* 周天气预报 */
        .week-weather-box {
            height: 100%;
            border-radius: 10px;
            background-color: #fff;
            width: 100%;
        }

        .week-weather-box .title {
            color: #3A475A;
            letter-spacing: 0;
            font-weight: 600;
        }

        /* 列表 */
        .week-wrap {
            display: flex;
        }

        .week-wrap .item {
            width: 14.2%;
            height: 100%;
            cursor: pointer;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 10px;
        }

        .week-wrap .item:hover {
            background: #F7FAFF;
            border-radius: 10px;
        }

        .week-wrap .item span {
            color: #393F48;
        }

        .week-wrap .item .date-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .week-wrap .item .date-box .dateFormat {
            font-size: 10px;
            color: #393F48;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
        }

        .week-wrap .item .date-box .date {
            font-size: 10px;
            color: #88909D;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
        }

        .week-wrap .item img {
            width: 60%;
            height: 20%;
        }

        .week-wrap .item .weather {
            font-size: 10px;
            color: #393F48;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
        }

        .week-wrap .item .temp {
            font-size: 10px;
            color: #393F48;
            letter-spacing: 0;
            text-align: center;
            font-weight: 500;
        }

        .week-wrap .item .wind span {
            font-size: 10px;
            color: #676C74;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
        }



        * {
            margin: 0;
            padding: 0;
        }


        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        img {
            border: 0px;
        }

        input {
            appearance: none;
            outline: none;
        }

        input::-webkit-input-placeholder {
            /* WebKit, Blink, Edge */

            color: #E6EBFF;

        }

        :-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */

            color: #E6EBFF;

        }

        ::-moz-placeholder {
            /* Mozilla Firefox 19+ */

            color: #E6EBFF;

        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */

            color: #E6EBFF;

        }

        input::-ms-input-placeholder {
            /* Microsoft Edge */

            color: #E6EBFF;

        }

        /* 清除浮动，解决margin-top塌陷 */
        .clearfix:before,
        .clearfix:after {
            content: '';
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }
    </style>
</head>

<body>
    <div class="container">

        <!-- 当前天气 -->
        <!--      <div class="weather-box">
            <div class="tem-box">
                <span class="temp">
                    <span class="temperature">12</span>
                    <span>°</span>
                </span>
            </div>
            <div class="climate-box">
                <div class="air">
                    <span class="psPm25">55</span>
                    <span class="psPm25Level">良</span>
                </div>
                <ul class="weather-list">
                    <li>
                        <img src="./imgs/小雨-line.png" class="weatherImg" alt="">
                        <span class="weather">多云</span>
                    </li>
                    <li class="windDirection">东南风</li>
                    <li class="windPower">2级</li>
                </ul>
            </div>
        </div>
        <div class="today-weather">
            <div class="range-box">
                <span>今天：</span>
                <span class="range">
                    <span class="weather">晴</span>
                    <span class="temNight">9</span>
                    <span>-</span>
                    <span class="temDay">14</span>
                    <span>℃</span>
                </span>
            </div>
            <ul class="sun-list">
                <li>
                    <span>紫外线</span>
                    <span class="ultraviolet">强</span>
                </li>
                <li>
                    <span>湿度</span>
                    <span class="humidity">53</span>%
                </li>
                <li>
                    <span>日出</span>
                    <span class="sunriseTime">06:38</span>
                </li>
                <li>
                    <span>日落</span>
                    <span class="sunsetTime">17:18</span>
                </li>
            </ul>
        </div> -->
        <!-- 周天气预报 -->
        <div class="week-weather-box">
            <div class="title">7日内天气预报</div>
            <ul class="week-wrap">
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">今天</span>
                        <span class="date">10月28日</span>
                    </div>
                    <img src="./imgs/多云.png" alt="" class="weatherImg">
                    <span class="weather">多云</span>
                    <div class="temp">
                        <span class="temNight">12</span>-
                        <span class="temDay">12</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">东南风</span>
                        <span class="windPower">&lt;3级</span>
                    </div>
                </li>
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">今天</span>
                        <span class="date">10月28日</span>
                    </div>
                    <img src="./imgs/多云.png" alt="" class="weatherImg">
                    <span class="weather">多云</span>
                    <div class="temp">
                        <span class="temDay">12</span>-
                        <span class="temNight">12</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">东南风</span>
                        <span class="windPower">&lt;3级</span>
                    </div>
                </li>
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">今天</span>
                        <span class="date">10月28日</span>
                    </div>
                    <img src="./imgs/多云.png" alt="" class="weatherImg">
                    <span class="weather">多云</span>
                    <div class="temp">
                        <span class="temDay">12</span>-
                        <span class="temNight">12</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">东南风</span>
                        <span class="windPower">&lt;3级</span>
                    </div>
                </li>
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">今天</span>
                        <span class="date">10月28日</span>
                    </div>
                    <img src="./imgs/多云.png" alt="" class="weatherImg">
                    <span class="weather">多云</span>
                    <div class="temp">
                        <span class="temDay">12</span>-
                        <span class="temNight">12</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">东南风</span>
                        <span class="windPower">&lt;3级</span>
                    </div>
                </li>
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">今天</span>
                        <span class="date">10月28日</span>
                    </div>
                    <img src="./imgs/多云.png" alt="" class="weatherImg">
                    <span class="weather">多云</span>
                    <div class="temp">
                        <span class="temDay">12</span>-
                        <span class="temNight">12</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">东南风</span>
                        <span class="windPower">&lt;3级</span>
                    </div>
                </li>
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">今天</span>
                        <span class="date">10月28日</span>
                    </div>
                    <img src="./imgs/多云.png" alt="" class="weatherImg">
                    <span class="weather">多云</span>
                    <div class="temp">
                        <span class="temDay">12</span>-
                        <span class="temNight">12</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">东南风</span>
                        <span class="windPower">&lt;3级</span>
                    </div>
                </li>
                <li class="item">
                    <div class="date-box">
                        <span class="dateFormat">今天</span>
                        <span class="date">10月28日</span>
                    </div>
                    <img src="./imgs/多云.png" alt="" class="weatherImg">
                    <span class="weather">多云</span>
                    <div class="temp">
                        <span class="temDay">12</span>-
                        <span class="temNight">12</span>
                        <span>℃</span>
                    </div>
                    <div class="wind">
                        <span class="windDirection">东南风</span>
                        <span class="windPower">&lt;3级</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>